<template>
  <div>
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
      <el-button
        slot="right"
        type="primary"
        size="mini"
        @click="clickWrongItem(topicId, 1)"
        v-if="!$util.isEmpty(wrongList)"
        >顺序重练</el-button
      >
    </my-tabs>
    <div class="wrong-body">
      <div
        class="item"
        v-for="item in wrongList"
        :key="item.id"
        @click="clickWrongItem(item.id, 0)"
      >
        <div class="subject">
          <div class="type-text">{{ item.question_type_text }}</div>
          <div class="title">
            {{ $util.delHtmlTag(item.topic_title, 120, '') }}
          </div>
        </div>
        <div class="operation">
          <div>
            <span>{{ `答错${item.wrong_count}次` }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{ `累计作答${item.answer_count}次` }}</span>
          </div>
          <div>{{ item.wrong_time | parseTime }}</div>
        </div>
      </div>
    </div>
    <EduNoData v-if="$util.isEmpty(wrongList)"></EduNoData>
    <EduPagination @handleCurrentChange="handleCurrentChange" align="right"></EduPagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/exam/my_exams',
          title: '考试记录'
        },
        {
          path: '/my/exam/wrong',
          title: '错题本'
        }
      ],
      wrongList: [],
      topicId: 0,
      routePath: this.$route.path
    }
  },
  created() {
    this.getExamWrongList()
  },
  methods: {
    getExamWrongList() {
      this.$api.getExamTopicWrongList(
        {
          page: this.$store.getters['paginate/page'],
          count: 10
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getExamWrongList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.wrongList = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 10,
        total: data.total
      })
      // 保存列表的第一个id
      if (data.current_page == 1) {
        this.topicId = this.$util.isEmpty(data.data) ? 0 : data.data[0].id
      }
    },
    clickWrongItem(id, type) {
      this.$router.push({
        path: '/exam/wrong/topic',
        query: {
          id: id,
          type: type
        }
      })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.wrong-body {
  .item {
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
    .subject {
      @include clearfix();
      .type-text {
        margin-top: 4px;
        margin-right: 4px;
        float: left;
        font-size: 12px;
        color: #ffffff;
        padding: 2px 5px;
        border-radius: 2px;
        line-height: 1;
        @include edu-color-primary(background-color);
      }
      .title {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-import;
        line-height: 24px;
      }
    }
    .operation {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
      .num {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-auxiliary;
      }
    }
  }
}
</style>
